<template>
  <div class="user-info">
    <div class="form-container">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        class="custom-form"
        label-position="top"
      >
        <el-form-item label="用户昵称" prop="nickName">
          <div class="input-wrapper">
            <i class="el-icon-user"></i>
            <el-input
              v-model="form.nickName"
              clearable
              maxlength="30"
              placeholder="请输入您的昵称"/>
          </div>
        </el-form-item>

        <el-form-item label="手机号码" prop="phonenumber">
          <div class="input-wrapper">
            <i class="el-icon-mobile-phone"></i>
            <el-input
              clearable
              v-model="form.phonenumber"
              maxlength="11"
              placeholder="请输入您的手机号码"
            />
          </div>
        </el-form-item>

        <el-form-item label="电子邮箱" prop="email">
          <div class="input-wrapper">
            <i class="el-icon-message"></i>
            <el-input
              clearable
              v-model="form.email"
              maxlength="50"
              placeholder="请输入您的电子邮箱"
            />
          </div>
        </el-form-item>

        <div class="form-actions">
          <button class="btn btn-primary" @click="submit">
            <i class="el-icon-check"></i> 保存
          </button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {updateUserProfile} from "@/api/system/user";

export default {
  props: {
    user: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        nickName: '',
        phonenumber: '',
        email: '',
      },
      // 表单校验
      rules: {
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {
    user: {
      handler(user) {
        if (user && Object.keys(user).length > 0) {
          this.form = {
            nickName: user.nickName || '',
            phonenumber: user.phonenumber || '',
            email: user.email || '',
          };
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserProfile(this.form).then(response => {
            this.$modal.msgSuccess("个人信息修改成功");

            // 更新父组件中的用户信息
            this.$emit('update:user', {
              ...this.user,
              nickName: this.form.nickName,
              phonenumber: this.form.phonenumber,
              email: this.form.email,
            });
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>

<style lang="scss" scoped>
.user-info {
  .form-container {
    max-width: 500px;

    .custom-form {
      ::v-deep .el-form-item__label {
        padding-bottom: 6px;
        line-height: 1;
        font-size: 13px;
        color: #606266;
        font-weight: 500;
      }

      .input-wrapper {
        position: relative;

        i {
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
          color: #909399;
          z-index: 1;
          font-size: 14px;
        }

        ::v-deep .el-input__inner {
          padding-left: 32px;
          height: 36px;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
          transition: all 0.2s;

          &:hover, &:focus {
            border-color: #409EFF;
          }
        }
      }

      .radio-group {
        display: flex;
        gap: 12px;

        .radio-item {
          flex: 1;
          max-width: 100px;
          height: 36px;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s;

          &:hover {
            border-color: #409EFF;
          }

          &.active {
            border-color: #409EFF;
            background-color: #ecf5ff;

            .radio-label {
              color: #409EFF;
              font-weight: 500;
            }
          }

          .radio-input {
            position: absolute;
            opacity: 0;
          }

          .radio-label {
            font-size: 13px;
            color: #606266;
          }
        }
      }

      .form-actions {
        margin-top: 24px;
        display: flex;
        gap: 12px;

        .btn {
          height: 36px;
          border-radius: 4px;
          padding: 0 16px;
          font-size: 13px;
          font-weight: 500;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s;
          border: none;

          i {
            margin-right: 6px;
            font-size: 14px;
          }

          &.btn-primary {
            background-color: #409EFF;
            color: #fff;

            &:hover {
              background-color: #66b1ff;
            }
          }

          &.btn-default {
            background-color: #f5f7fa;
            color: #606266;
            border: 1px solid #dcdfe6;

            &:hover {
              background-color: #e9ebef;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .form-actions {
    flex-direction: column;

    .btn {
      width: 100%;
    }
  }
}
</style>
